import React, { Component } from 'react';
import { connect } from 'react-redux';
import { testOneUrl, testTwoUrl, testThreeUrl } from '../../utils/consts/api.js';
import { testOne, testTwo, testThree } from './redux/redux.js';
import styles from './css/ReduxHttp.module.css';
import { reduxSet } from './redux/redux.js';
class ReduxHttp extends Component {
    // constructor(props) {
    //     super(props);
    // }
    updataUrl(url) {
        var data = null;
        switch (url) {
            case testOne:
                data = {
                    type: testOne,
                    url: testOneUrl
                };
                this.props.updataHttpUrl(data);
                break;
            case testTwo:
                data = {
                    type: testTwo,
                    url: testTwoUrl
                };
                this.props.updataHttpUrl(data);
                break;
            case testThree:
                data = {
                    type: testThree,
                    url: testThreeUrl
                };
                this.props.updataHttpUrl(data);
                break;
            default:
                break;
        }
    }
    render() {
        return (
            <div>
                <section>测试接口</section>
                <ul>
                    <li className={`${styles.pointer} ${styles.urlList} ${this.props.activeUrl === testOneUrl && styles.active}`} onClick={() => { this.updataUrl(testOne) }}>one</li>
                    <li className={`${styles.pointer} ${styles.urlList} ${this.props.activeUrl === testTwoUrl && styles.active}`} onClick={() => { this.updataUrl(testTwo) }}>two</li>
                    <li className={`${styles.pointer} ${styles.urlList} ${this.props.activeUrl === testThreeUrl && styles.active}`} onClick={() => { this.updataUrl(testThree) }}>three</li>
                </ul>
                <div>
                    <section>返回结果</section>
                    <div>
                        结果：{JSON.stringify(this.props.response)}
                    </div>
                </div>
            </div>
        )
    }
}

export default connect(
    (state, ownProps) => ({
        url: state[reduxSet.name].url,
        result: state[reduxSet.name].result,
        activeUrl: state[reduxSet.name].url,
        responseOne: state[reduxSet.name].responseOne,
        responseTwo: state[reduxSet.name].responseTwo,
        responseThree: state[reduxSet.name].responseThree,
        response: state[reduxSet.name].response
    }),
    (dispatch, ownProps) => ({
        updataHttpUrl: (data) => dispatch({ ...data }),
    })
)(ReduxHttp);